<template>
  <div class="account-box">
    <!-- 搜索 -->
    <!-- 表格 -->
    <TableBox @tooles="handleTooles"
              :tableData="tableData"
              :tableHead="tableHead" />
    <!-- 分页 -->
    <!-- 修改的弹出框 -->
    <el-dialog title="提示"
               :visible.sync="dialogVisible"
               width="30%">
      <!-- 这里是修改用户的form表单 -->
      <el-form ref="form"
               :disabled="disabled"
               label-width="80px">
        <el-form-item label="账户名称">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="账户权限">
          <el-select v-model="form.role"
                     placeholder="请选择用户权限">
            <el-option label="管理员"
                       value="1"></el-option>
            <el-option label="普通账户"
                       value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账户密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { deleteUser, editUser } from "../api/index";
import TableBox from "../components/fiterTable/table";
export default {
  name: "Account",
  components: { TableBox },
  data() {
    return {
      // 要操作的数据下标
      index: 0,
      // 是否禁用form表单项
      disabled: false,
      // form表单数据
      form: { username: "", role: "", uid: "", password: "" },
      // 控制弹出是否显示的
      dialogVisible: false,
      tableHead: [
        { label: "账户名", prop: "username" },
        { label: "权限等级", prop: "role" },
        { label: "操作", prop: false }
      ],
      tableData: [
        {
          uid: "YJ1IJOII4C",
          token: "eyJ1Ijoii4ciLCJwIjoiY240NTY0NjVhc2Q5MzgifQ==",
          username: "舒浩奇",
          password: "e10adc3949ba59abbe56e057f20f883e",
          loginState: true,
          role: "1"
        },
        {
          uid: "YJ1IJOII4CBB",
          token: "eyJ1Ijoii4cBBiLCJwIjoiY240NTY0NjVhc2Q5MzgifQ==",
          username: "kefu",
          password: "e10adc3949ba59abbe56e057f20f883e",
          loginState: true,
          role: "2"
        }
      ]
    };
  },
  methods: {
    // 弹出框确认事件
    dialogSubmit() {
      // 发起一个ajax请求
      console.log(this.form);
      // 1. 走接口要区分是编辑还是删除
      if (this.disabled) {
        deleteUser(this.form).then(res => {
          if (res) {
            this.$message.success("删除成功！");
            this.tableData.splice(this.index, 1);
          } else {
            this.$message.error("请求失败");
          }
          // 将弹出框关掉
          this.dialogVisible = false;
        });
      } else {
        editUser(this.form).then(res => {
          if (res) {
            this.$message.success("修改成功！");
            this.tableData[this.index].username = this.form.username;
            this.tableData[this.index].role = this.form.role;
          } else {
            this.$message.error("请求失败");
          }
          // 将弹出框关掉
          this.dialogVisible = false;
        });
      }
    },
    // 接收表格传过来的数据
    handleTooles(data) {
      console.log(data);
      // 1. 把值存起来，，然后赋给弹窗里的form表单
      this.form.username = data.row.username;
      this.form.role = data.row.role;
      this.form.uid = data.row.uid;
      this.disabled = data.type === "edit" ? false : true;
      this.index = data.index;
      // 2. 唤起弹窗
      this.dialogVisible = true;
    }
  }
};
</script>

<style>
</style>